<template>
	<view class="rank">
		<down-time :times="times"></down-time>
		<!-- <view class="title">排行榜</view> -->
		<view class="list">
			<view class="item head">
				<view class="num">排名</view>
				<view class="username">姓名</view>
				<view class="total">点赞数</view>
			</view>
			<view v-for="(item,index) in rankList" :key="index" class="item">
				<view class="num">{{index+1}}</view>
				<image class="avatar" :src="item.image_input" mode="aspectFill"></image>
				<view class="username">{{item.author || '---'}}</view>
				<view class="total"><text>{{item.total_goods_value}}</text>赞</view>
			</view>
		</view>
		<tab-bar :current="2"></tab-bar>
	</view>
</template>

<script>
	import downTime from './components/downTime';
	import {getCategoryList,getRank} from '@/api/vote';
	import tabBar from './components/tabbar';
	export default {
		components: {
			downTime,
			tabBar
		},
		data() {
			return {
				dataInfo: '',
				params: {
					page: 1,
					limit: 10
				} ,
				rankList: [],
				finished: false,
				times: 0,
			};
		},
		onShow() {
			this.getCategoryList();
		},
		onReachBottom() {
			this.getRankList()
		},
		methods: {
			getCategoryList() {
				getCategoryList().then(res => {
					if(res.data.length) {
						let now = Math.floor(new Date().getTime() / 1000);
						this.dataInfo = res.data[0];
						this.times = this.dataInfo.end_time;
						this.getRankList();
					}
				})
			},
			getRankList() {
				if(this.finished) return;
				getRank({id: this.dataInfo.id,...this.params}).then(res => {
					this.rankList = this.params.page > 1 ? [...this.rankList, ...res.data] : res.data;
					this.params.page += 1;
					this.finished = res.data.length < this.params.limit;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.rank {
	padding: 100rpx 24rpx 24rpx;
	background: url('/static/images/vote/929rback.jpg')no-repeat top;
	background-size: 100% auto;
	.title {
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
		padding: 10rpx 0 40rpx;
		// color: #e57511;
	}
	.list {
		border-radius: 16rpx;
		background-color: #fff;
		border: 2rpx solid #e57511;
		box-shadow: 0 0 20rpx rgba(0,0,0,.05);
		padding: 0 24rpx;
		.item {
			padding: 40rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #e5e5e5;
			&.head {
				border-bottom: none;
				.num {
					color: #333;
					font-weight: 400;
					font-size: 28rpx;
				}
			}
			.num {
				width: 80rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #e57511;
				text-align: center;
			}
			.avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			.username {
				flex: 1;
				padding: 0 30rpx;
				font-size: 28rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.total {
				text {
					font-size: 32rpx;
					font-weight: 600;
					color: #e57511;
					margin-right: 6rpx;
				}
			}
		}
	}
}
</style>
